<!--
 * @Date: 2023-03-07 14:01:52
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-11 10:26:17
 * @FilePath: \A19\frontend\src\components\Test\QuestionsPanel.vue
-->
<template>
    <ElButton @click="addQFormQs">添加题目</ElButton>
    <el-dialog
        v-model="dialogVisible"
        title="我的题库"
        width="60%"
        :before-close="cancel"
    >
        <!-- <el-transfer
            v-model="value"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="State Abbreviations"
            :data="data"
            style="text-align: center;"
        /> -->

        <el-table
            ref="multipleTableRef"
            :data="questions"
            style="width: 100%"
            @selection-change="selectChange"
        >
        <el-table-column type="expand">
                <template #default="{ row }">
                    <div class="expand">
                        <el-descriptions title="题目信息">
                            <el-descriptions-item :span="3" label="题目"
                            >
                                {{ row.question.question }}
                            </el-descriptions-item
                            >
                            <el-descriptions-item label="类型">{{ row.question.type}}</el-descriptions-item>
                            <el-descriptions-item label="分值" :span="2">{{ row.question.score }}</el-descriptions-item>
                            <el-descriptions-item v-if="row.question.selections" label="选项">
                                <div class="selections">
                                    <div class="selection" :key="sel" v-for="sel in row.question.selections">
                                        {{ sel }}
                                    </div>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                        <!-- {{ row }} -->
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="题目">
                <template #default="scope">{{ scope.row.question.question }}</template>
            </el-table-column>
            <el-table-column label="类型" width="200">
                <template #default="scope">{{ scope.row.question.type }}</template>
            </el-table-column>
            <el-table-column label="分值" width="100">
                <template #default="scope">{{ scope.row.question.score }}</template>
            </el-table-column>
            <el-table-column type="selection" width="55" />
        </el-table>

        <template #footer>
        <span class="dialog-footer">
            <el-button @click="cancel(() => {})">取消</el-button>
            <el-button type="primary" @click="confirm">
            添加到试卷
            </el-button>
        </span>
        </template>
    </el-dialog>

</template>

<script lang="ts" setup>
import { useClientStore } from "@/pinia/stores/client";
import { ref, onMounted, reactive, watch, computed, watchEffect } from 'vue';
import { questions,  } from '../../shared/types/Question';
import { ElTable } from "element-plus";

const { client } = useClientStore()
const props = defineProps<{ questions:Array<questions> }>();

const questions = ref(new Array<questions>)
const dialogVisible = ref(false)

const cons = reactive({
    type: '' as "选择题" | "填空题" | "简答题" | "判断题" | "",
    keyword:'',
})
watchEffect(async newValue =>{
    if(dialogVisible.value){}
    const ret = await client.callApi('Get/GetQuestions',{
        type:cons.type?cons.type:undefined,
        keyword:cons.keyword?cons.keyword:undefined
    })
    if(ret.isSucc){
        // console.log(ret.res);
        questions.value = ret.res.questions
    }
})


const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const selectedQuestions = ref(new Array<questions>)
const addQFormQs = ()=>{
    dialogVisible.value = true
}
const cancel = (done?: () => void) => {
    toggleSelection()
    dialogVisible.value = false
}
const selectChange = (val:Array<questions>)=>{
    selectedQuestions.value = val
}
const toggleSelection = (rows?: questions[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row,false)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const confirm = ()=>{
    let count = 0
    selectedQuestions.value.forEach(question =>{
        if(props.questions.find(q => q._id === question._id)){
            
        }
        else{
            count++
            props.questions.push(question)
        }
    })
    ElMessage.success(`成功添加 ${count} 道题`)
    cancel()
}

onMounted(async ()=>{
    
})
</script>

<style lang="less" scoped>
.expand{
    // height: 60px;
    // background-color: aqua;
    box-sizing: border-box;
    padding: 10px 60px;
}
.selections{
    // height:60px;
    // background-color: aqua;
    .selection{
        padding-left: 20px;
    }
}
</style>